<!--
 * @Author: xfworld
 * @Date: 2020-06-10 15:26:04
 * @LastEditors: xfworld
 * @LastEditTime: 2020-06-11 17:10:03
 * @Description:
-->
<template>
  <div class="scanner">
    <van-nav-bar title="任务领取" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    <van-row style="margin-top: 0.5rem;" type="flex" justify="center">
      <van-col>
        <van-form>
          <van-field is-link label="货主" v-model="formItem.storerCode" @click="storerShow = true" />
          <van-action-sheet v-model="storerShow" :actions="storerActions" :close-on-click-overlay="true" @select="onStorerSelect" />
          <van-field is-link label="仓库" v-model="formItem.wareHouseName" @click="wareHouseShow = true" />
          <van-action-sheet v-model="wareHouseShow" :actions="wareHouseActions" @select="logisticsSelect" />
          <van-field is-link label="品牌" v-model="formItem.brandName" @click="brandShow = true" />
          <van-action-sheet v-model="brandShow" :actions="brandActions" @select="brandSelect" />
          <van-field
            v-model="formItem.aisle"
            ref="aisle"
            placeholder="请扫描通道号"
            @keyup.enter.native="searchAisleData"
            :rules="[{required: true, message: '请扫描通道号'}]"
          />
          <van-field v-model="formItem.newTask" placeholder="当前区域没有新任务!" style="height: 80px;" />
        </van-form>
        <div style="float: right; margin-top: 8px;">
          <van-button type="default" size="small" @click="onGoing">继续</van-button>
        </div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
//查询货主的方法
import {getStorerSelect, getWarehouseSelect, getBrandSelect} from "@/api/common/selectData";
import {mapGetters} from "vuex";
import {findDataFunction} from "@/api/pickScan/taskGet.js";

export default {
  name: "b2cBandOver",
  computed: {
    ...mapGetters("user", ["userData"]),
    ...mapGetters("scanner", ["pdaScanData"])
  },
  mounted() {
    this.getStorerIdList();
  },
  data() {
    return {
      //控制货主下拉框的弹出
      storerShow: false,
      //控制仓库下拉框的弹出
      wareHouseShow: false,
      //控制品牌下拉框的弹出
      brandShow: false,
      //存放货主下拉框数据
      storerActions: [],
      //存放仓库下拉框数据
      wareHouseActions: [],
      //存放品牌下拉框数据
      brandActions: [],
      newTaskData: [],
      formItem: {
        //货主
        storerCode: "",
        //货主id
        storerId: "",
        storerName: "",
        //仓库
        wareHouseCode: "",
        //仓库id
        wareHouseId: "",
        wareHouseName: "",
        //品牌
        brandCode: "",
        //品牌id
        brandId: "",
        brandName: "",
        //过道号
        aisle: "",
        //展示的查询出来的数据
        newTask: ""
      }
    };
  },
  methods: {
    //页面点击进来时候走此函数给查询出货主下拉框的数据
    getStorerIdList() {
      let userId = this.userData.userId;
      getStorerSelect(userId).then(response => {
        this.storerActions = [];
        this.formItem.storerId = "";
        this.formItem.storerCode = "";
        if (response.data.status) {
          let data = [];
          for (let i = 0; i < response.data.data.length; i++) {
            data.push({
              id: response.data.data[i].grantKey,
              name: response.data.data[i].grantValue
            });
          }
          this.storerActions = data;
          this.formItem.storerCode = this.storerActions[0].name;
          this.formItem.storerId = this.storerActions[0].id;
          this.getWareHouse();
        } else {
          this.$notify({type: "warning", message: response.data.message});
        }
      });
    },

    //仓库下拉框数据获取方法
    getWareHouse() {
      getWarehouseSelect(this.formItem.storerId, this.userData.userId).then(response => {
        this.wareHouseActions = [];
        this.formItem.wareHouseName = "";
        this.formItem.wareHouseId = "";
        if (response.data.status) {
          let data = [];
          for (let i = 0; i < response.data.data.length; i++) {
            data.push({
              id: response.data.data[i].grantKey,
              name: response.data.data[i].grantValue
            });
          }
          this.wareHouseActions = data;
          this.formItem.wareHouseName = this.wareHouseActions[0].name;
          this.formItem.wareHouseId = this.wareHouseActions[0].id;
          this.getBrandList();
        } else {
          this.$notify({type: "warning", message: response.data.message});
        }
      });
    },

    //品牌下拉框数据获取方法
    getBrandList() {
      getBrandSelect(this.formItem.storerId, this.formItem.wareHouseId, this.userData.userId).then(response => {
        this.brandActions = [];
        this.formItem.brandName = "";
        this.formItem.brandId = "";
        if (response.data.status) {
          if (response.data.data != "") {
            let data = [];
            for (let i = 0; i < response.data.data.length; i++) {
              data.push({
                name: response.data.data[i].grantValue,
                id: response.data.data[i].grantKey
              });
            }
            this.brandActions = data;
            this.formItem.brandName = this.brandActions[0].name;
            this.formItem.brandId = this.brandActions[0].id;
          }
        } else {
          this.$notify({type: "warning", message: response.data.message});
        }
      });
      this.$nextTick(() => {
        this.$refs["aisle"].focus();
      });
    },

    //选择货主后执行的方法
    onStorerSelect(item) {
      this.formItem.storerId = item.id;
      //this.formItem.storerCode = item.storerCode;
      this.getWareHouse();
      this.storerShow = false;
      //this.getBrandList();
    },

    logisticsSelect(item) {
      this.wareHouseShow = false;
      this.formItem.wareHouseName = item.name;
      this.formItem.wareHouseCode = item.code;
      this.$nextTick(() => {
        this.$refs["aisleCode"].focus();
      });
    },

    brandSelect(item) {
      this.brandShow = false;
      this.formItem.brandName = item.name;
      this.formItem.brandCode = item.code;
      this.$nextTick(() => {
        this.$refs["aisle"].focus();
      });
    },

    //扫描通道号后执行的方法
    searchAisleData() {
      findDataFunction(this.formItem.storerCode, this.formItem.wareHouseCode, this.formItem.brandCode, this.formItem.aisle)
        .then(response => {
          this.newTaskData = [];
          this.formItem.newTask = "";
          if (response.data.status) {
            this.formItem.newTask = "拣货任务号：" + response.data.data.pickTaskCode;
            this.newTaskData = response.data.data;
          } else {
            this.$notify({type: "warning", message: response.data.message});
          }
        })
        .catch(error => {
          this.$toast.fail("请求出错！" + error);
        });
    },

    //返回方法
    onClickLeft() {
      this.$router.push({
        name: "b2cpickScan"
      });
    },

    //继续按钮方法 跳转到任务管理主页面
    onGoing() {
      // if (this.formItem.newTask.length == 0){
      //     Toast("当前区域没有新任务,不能继续操作!");
      // }else {
      //     updateDataFunction(this.newTaskData).then(response => {
      //         if (response.data.status) {
      //             //状态修改成功后跳转
      //             this.$router.push({
      //                 name: "taskManageHome",
      //                 params:{
      //                     data:response.data.data,
      //                     aisle: this.formItem.aisle
      //                 }
      //             });
      //         }else {
      //             Notify({ type: 'warning', message: response.data.message });
      //         }
      //     })
      // }
      this.$router.push({
        name: "taskManageHome",
        params: {
          //data: response.data.data,
          aisle: this.formItem.aisle
        }
      });
    }
  }
};
</script>

<style lang="less"></style>
